import { createFileRoute } from "@tanstack/react-router";
import Button from "@/components/Button";
import CountDown from "@/components/CountDown";
import Counter from "@/components/Counter";
import HelloWorld from "@/components/HelloWorld";
import Icon from "@/components/Icon";
import Panel from "@/components/Panel";
import ComputedDemo from "@/demo/ComputedDemo";
import InputDemo from "@/demo/InputDemo";
import WatchDemo from "@/demo/WatchDemo";

export const Route = createFileRoute("/demo/")({
  head: () => ({
    meta: [{ title: "Demo" }, { name: "description", content: "Demo" }],
  }),
  component: Demo,
});

function Demo() {
  return (
    <div>
      <HelloWorld />
      <Icon icon="home" style={{ fontSize: 32 }} />
      <Panel title={<h2>Title</h2>}>
        Body
        <div>Body</div>
      </Panel>
      <Button onClick={() => alert("xx")}>
        <Icon icon="smile" /> Click Me
      </Button>
      <Counter />
      <ComputedDemo />
      <CountDown start={5} onDone={() => console.log("Done")} />
      <InputDemo />
      <WatchDemo />
    </div>
  );
}
